<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>回到顶部</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				height: 3000px;
				background: radial-gradient(transparent,red);
			}
			#btn{
				position: fixed;
				bottom: 30px;
				right: 30px;
				background: mediumvioletred;
				color: #FFFFFF;
				width: 50px;
				height:50px;
				border: none;
				outline: none;
				border-radius:5px ;
				padding: 10px;
				display: none;
			}
		</style>
	</head>
	<body>
		<button id='btn'>回到顶部</button>
	</body>
	<script>
	var btn=document.getElementById('btn');
	var timer=null;
	document.onscroll=function(){
		var sclTop=document.documentElement.scrollTop||document.body.scrollTop;
		if(sclTop>1000){
			btn.style.display='block';
		}else{
			btn.style.display='none';
		}
	}
	
	//添加 滚动事件
	btn.onclick=function(){
	    timer=setInterval(function(){
		var sclTop1=document.documentElement.scrollTop||document.body.scrollTop;
		var t=sclTop1*0.8;
		document.documentElement.scrollTop=t;
		document.body.scrollTop=t;
		console.log(sclTop1)
		if(sclTop1<=0){
		clearInterval(timer);
	}
	},100);
	}
	
	/*
	 
	 * 
	 * 
	 * 
	 * 
	 * 
	 * 
	 * 
	 * 
	 * 
	 * 
	 * 
	 * 
	 * */
	</script>
</html>
